<template>
    <div>
        <web-header show="periphery" />
        <section class="list_a" style="background-color: #f5f5f5;">
            <aside style="background-color: #fff;">
                <div class="list-tabs">
                    <div class="df">
                        <div class="list-left">
                            <img src="https://admin.hqx.com.cn/Public/App/image/periphery-imgs (5).png" alt="">
                            <div class="tab-name">想去</div>
                        </div>
                        <div class="list-right" style="padding-top: 2px;">

                            <router-link to="/line/138" class="city-item">惠州<span
                                    class="hot-tip iconfont icon-hot-tip"></span></router-link>
                            <router-link to="/line/134" class="city-item">河源<span
                                    class="hot-tip iconfont icon-hot-tip"></span></router-link>
                            <router-link to="/line/132" class="city-item">清远</router-link>
                            <router-link to="/line/150" class="city-item">英德</router-link>
                            <router-link to="/line/145" class="city-item">广州</router-link>
                            <router-link to="/line/497" class="city-item">巽寮湾<span
                                    class="hot-tip iconfont icon-hot-tip"></span></router-link>
                            <router-link to="/line/498" class="city-item">双月湾<span
                                    class="hot-tip iconfont icon-hot-tip"></span></router-link>
                            <router-link to="/line/240" class="city-item">潮州<span
                                    class="hot-tip iconfont icon-hot-tip"></span></router-link>
                            <router-link to="/line/369" class="city-item">南昆山</router-link>
                            <router-link to="/line/144" class="city-item">珠海<span
                                    class="hot-tip iconfont icon-hot-tip"></span></router-link>
                            <router-link to="/line/143" class="city-item">深圳</router-link>
                            <router-link to="/line/135" class="city-item">大鹏</router-link>
                            <router-link to="/line/77" class="city-item">广东</router-link>
                            <router-link to="/line/133" class="city-item">韶关<span
                                    class="hot-tip iconfont icon-hot-tip"></span></router-link>
                            <router-link to="/line/141" class="city-item">肇庆</router-link>
                            <router-link to="/line/146" class="city-item">江门</router-link>
                            <router-link to="/line/149" class="city-item">东莞<span
                                    class="hot-tip iconfont icon-hot-tip"></span></router-link>
                            <router-link to="/line/242" class="city-item">顺德<span
                                    class="hot-tip iconfont icon-hot-tip"></span></router-link>
                            <router-link to="/line/243" class="city-item">龙门</router-link>
                            <router-link to="/line/353" class="city-item">从化</router-link>
                            <router-link to="/line/354" class="city-item">恩平</router-link>

                        </div>
                    </div>
                    <div class="df">
                        <div class="list-left">
                            <img src="https://admin.hqx.com.cn/Public/App/image/periphery-imgs (4).png" alt="">
                            <div class="tab-name">天数</div>
                        </div>
                        <div class="list-right" style="padding-top: 3px;">
                            <router-link to="/line/133" class="list-day">1日</router-link>
                            <router-link to="/line/133" class="list-day">2-4日</router-link>
                            <router-link to="/line/133" class="list-day">5-7日</router-link>
                            <router-link to="/line/133" class="list-day">7日以上</router-link>
                        </div>
                    </div>
                    <div class="df">
                        <div class="list-left">
                            <img src="https://admin.hqx.com.cn/Public/App/image/periphery-imgs (3).png" alt="">
                            <div class="tab-name">推荐</div>
                        </div>
                        <div class="list-right" style="padding-top: 3px;">
                            <router-link to="/line/133" class="list-day">清远一地</router-link>
                            <router-link to="/line/133" class="list-day">珠海长隆+广州</router-link>
                            <router-link to="/line/133" class="list-day">潮洲汕头</router-link>
                            <router-link to="/line/133" class="list-day">双月湾</router-link>
                            <router-link to="/line/133" class="list-day">大鹏团建</router-link>
                        </div>
                    </div>
                </div>
                <dl class="list2">
                    <dt>满意度<span>95</span>
                        <span>%</span>
                    </dt>
                    <dd>已关注人数：<span>125878人</span>
                    </dd>
                </dl>
            </aside>
            <div class="right">
                <ul>
                    <li>
                        <router-link to="/line/138/">
                            <img src="https://admin.hqx.com.cn/Public/App/image/periphery-ts (1).png" />
                            <div class="li-title">全球唯一的双湾双海奇景</div>
                            <div class="li-name">广东度假必体验</div>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/theme/list/12">
                            <img src="https://admin.hqx.com.cn/Public/App/image/periphery-ts (2).png" />
                            <div class="li-title">浸泡温泉 品味休闲</div>
                            <div class="li-name">全场5折起，一起去旅行吧</div>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/theme/list/16">
                            <img src="https://admin.hqx.com.cn/Public/App/image/periphery-ts (3).png" />
                            <div class="li-title">体验不一样的团队力量</div>
                            <div class="li-name">携手并进，共创辉煌</div>
                        </router-link>
                    </li>
                </ul>
            </div>
        </section>
        <section class="list_b">
            <div class="center">
                <div class="top">
                    <div class="left"><span>热销排行榜</span> &nbsp;&nbsp; 玩转性价比</div>
                    <div class="right">
                        <router-link to="/line/366">佛山</router-link>
                        <router-link to="/line/368">佛冈</router-link>
                        <router-link to="/line/364">增城</router-link>
                        <router-link to="/line/365">云浮</router-link>
                        <router-link to="/line/494">汕头</router-link>
                        <router-link to="/line/495">汕尾</router-link>
                        <router-link to="/line/496">中山</router-link>
                        <router-link to="/line/502">英西</router-link>
                        <router-link to="/line/503">连州</router-link>
                        <router-link to="/line/504">博罗</router-link>
                        <router-link to="/line/510">阳江</router-link>
                        <router-link to="/line/519">南澳</router-link>
                    </div>
                </div>
                <div class="list">
                    <dl v-for="(rs, index) in hotSale" :key="rs.id" class="post-re border-rds">
                        <div v-if="rs.themeArray[0]" class="post-ab">{{ rs.themeArray[0].title }}</div>
                        <dt>
                            <router-link :to="`/details/${rs.id}`">
                                <img :src="rs.picture || rs.pic" />
                            </router-link>
                        </dt>
                        <dd>
                            <router-link :to="`/details/${rs.id}`" class="title clamp-line-2">
                                {{ rs.title }}</router-link>
                            <div class="text">
                                <span>4.8</span>({{ rs.likes }})评价&nbsp;|&nbsp;{{ rs.clicks }}人参加过
                            </div>
                            <span class="price2">￥{{ rs.price + 100 }}</span>
                            <div class="price">
                                <span>{{ rs.price }}</span><span style="font-size: 12px">/起</span>
                                <router-link :to="`/details/${rs.id}`" class="toDetail">查看详情</router-link>
                            </div>
                        </dd>
                    </dl>

                </div>
                <div class="bottom">
                    <dl>
                        <dt><router-link to="/line/497">
                                <img src="https://admin.hqx.com.cn/Public/App/image/periphery-banner.png" width="590"
                                    height="100" />
                            </router-link></dt>
                        <dd><router-link to="/line/144">
                                <img src="https://admin.hqx.com.cn/Public/App/image/periphery-banner.jpg" width="590"
                                    height="100" />
                            </router-link></dd>
                    </dl>
                </div>
            </div>
        </section>
        <section class="list_c">
            <!-- <div class="top">
                <dl>
                    <dt>当季精选</dt>
                    <dd><span>激情夏日、冰点特惠</span>畅想冰尖上的过山车！</dd>
                </dl>
            </div> -->
            <div class="top-nav">
                <div class="left"><span>当季精选</span> &nbsp;&nbsp; 畅想冰尖上的过山车!</div>
                <div class="right">
                    <!-- <router-link to="/line/496">中山</router-link>
                    <router-link to="/line/502">英西</router-link>
                    <router-link to="/line/503">连州</router-link>
                    <router-link to="/line/504">博罗</router-link>
                    <router-link to="/line/510">阳江</router-link>
                    <router-link to="/line/519">南澳</router-link> -->
                </div>
            </div>
            <div class="list">
                <dl v-for="(rs, index) in featureList" :key="rs.id" class="border-rds universal-shadow"
                    style="box-shadow: 0px 0px 10px -2px #cbcbcb;">
                    <dt>
                        <router-link :to="`/details/${rs.id}`">
                            <img :src="rs.picture || rs.pic" /></router-link>
                    </dt>
                    <dd>
                        <router-link :to="`/details/${rs.id}`" class="title clamp-line-1">
                            {{ rs.title }}</router-link>
                        <div class="df" style="justify-content: space-between;padding: 11px 0 0; margin: -6px 0;">
                            <div class="text" style="font-size: 12px; color: #999;">
                                <span>4.8</span>({{ rs.likes }})评价&nbsp;|&nbsp;{{ rs.clicks }}人参加过
                            </div>
                            <div class="price" style="color: #ff1583">
                                <span>{{ rs.price }}</span>/<span style="font-size: 12px">起</span>
                            </div>
                        </div>
                        <!-- <router-link :to="`/details/${rs.id}`" class="title clamp-line-1" style="height: 30px;"> {{
                            rs.title
                            }}</router-link>
                        <div >{{ rs.price }}元/起</div> -->
                    </dd>
                </dl>
            </div>
        </section>
        <div style="background-color: #fff; padding: 16px 0;">
            <section class="list_d">
                <div class="top">
                    <ul class="screen-themes">
                        <li><router-link to="/theme/list/37">大自然</router-link></li>
                        <li><router-link to="/theme/list/39">城市观光</router-link></li>
                        <li><router-link to="/theme/list/22">历史古迹</router-link></li>
                        <li><router-link to="/theme/list/5">美食</router-link></li>
                        <li><router-link to="/theme/list/19">旅拍</router-link></li>
                        <li><router-link to="/theme/list/41">网红打卡</router-link></li>
                        <li><router-link to="/theme/list/10">海岛</router-link></li>
                        <li><router-link to="/theme/list/11">亲子游</router-link></li>
                        <li><router-link to="/theme/list/12">温泉</router-link></li>
                        <li><router-link to="/theme/list/9">蜜月</router-link></li>
                        <li><router-link to="/theme/list/44">古镇</router-link></li>
                        <li><router-link to="/theme/list/1">赏花</router-link></li>
                        <li><router-link to="/theme/list/46">游船</router-link></li>
                        <li><router-link to="/theme/list/57">多国游</router-link></li>
                        <li><router-link to="/theme/list/48">博物馆</router-link></li>
                        <li><router-link to="/theme/list/50">沙滩</router-link></li>
                        <li><router-link to="/theme/list/2">春游</router-link></li>
                        
                    </ul>
                </div>
                <div class="bottom">
                    <aside>
                        <!-- <router-link to="/"> -->
                        <img src="https://admin.hqx.com.cn/Public/Travel/images/periphery/7.png" />
                        <!-- </router-link> -->
                    </aside>
                    <div class="right">
                        <div v-for="(rs, index) in sideLine" :key="rs.id" class="list">
                            <dl>
                                <dt><router-link :to="`/details/${rs.id}`">
                                        <img :src="rs.picture || rs.pic" /></router-link></dt>
                                <dd>
                                    <div class="title clamp-line-2"
                                        style="height: 50px; width: 100%;margin-bottom: 20px;">
                                        <router-link :to="`/details/${rs.id}`">{{ rs.title }}</router-link>
                                    </div>
                                    <div class="price2">{{ rs.intro }}</div>
                                    <div class="price"><span>￥{{ rs.price }}</span>元起</div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <section class="list_b" style="background: #f5f5f5;padding: 50px 0;">
            <div class="center">
                <div class="top">
                    <!-- <router-link to="/theme/list/7" class="to-tabs">研学</router-link>
                    <router-link to="/theme/list/9" class="to-tabs">蜜月</router-link>
                    <router-link to="/theme/list/5" class="to-tabs">美食</router-link>
                    <router-link to="/theme/list/22" class="to-tabs">历史古迹</router-link>
                    <router-link to="/theme/list/11" class="to-tabs">亲子游</router-link>
                    <router-link to="/theme/list/24" class="to-tabs">徒步</router-link>
                    <router-link to="/theme/list/34" class="to-tabs">团建</router-link>
                    <router-link to="/theme/list/38" class="to-tabs">露营</router-link> -->
                    <ul class="screen-themes">
                        
                        <li><router-link to="/theme/list/40">度假村</router-link></li>
                        <li><router-link to="/theme/list/24">徒步</router-link></li>
                        <li><router-link to="/theme/list/18">养生</router-link></li>
                        <li><router-link to="/theme/list/6">邮轮</router-link></li>
                        <li><router-link to="/theme/list/3">滑雪</router-link></li>
                        <li><router-link to="/theme/list/49">出海</router-link></li>
                        <li><router-link to="/theme/list/27">潜水</router-link></li>
                        <li><router-link to="/theme/list/15">拓展</router-link></li>
                        <li><router-link to="/theme/list/51">越野</router-link></li>
                        <li><router-link to="/theme/list/47">湿地公园</router-link></li>
                        <li><router-link to="/theme/list/33">主题乐园</router-link></li>
                        <li><router-link to="/theme/list/7">研学</router-link></li>
                        <li><router-link to="/theme/list/42">演出</router-link></li>
                        <li><router-link to="/theme/list/55">烧烤野炊</router-link></li>
                        <li><router-link to="/theme/list/45">泳池</router-link></li>
                        <li><router-link to="/theme/list/34">团建</router-link></li>
                    </ul>
                </div>
                <div class="list">
                    <dl v-for="(rs, index) in rests" :key="rs.id" class="post-re border-rds"
                        style="background-color: #fff;">
                        <div v-if="rs.themeArray[0]" class="post-ab">{{ rs.themeArray[0].title }}</div>
                        <dt>
                            <router-link :to="`/details/${rs.id}`">
                                <img :src="rs.picture || rs.pic" />
                            </router-link>
                        </dt>
                        <dd>
                            <router-link :to="`/details/${rs.id}`" class="title clamp-line-2">
                                {{ rs.title }}</router-link>
                            <div class="text">
                                <span>4.8</span>({{ rs.likes }})评价&nbsp;|&nbsp;{{ rs.clicks }}人参加过
                            </div>
                            <span class="price2">￥{{ rs.price + 120 }}</span>
                            <div class="price">
                                <span>{{ rs.price }}</span>元起
                                <router-link :to="`/details/${rs.id}`" style="padding: 4px 4px;">查看详情</router-link>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>

        </section>
        <section class="list_e">
            <div class="img">
                <span>他们，带你踏上精彩旅程！</span>
                <div> 我们的线路，来源于专业设计师一次次出发探路、一点点细节磨合。<br />
                    他们不仅是旅行经验丰富的超级玩咖，更擅长设计出满足国人旅行偏好 和需求的线路。 </div>
                <div> 此外，我们的专业领队不仅热爱和熟知当地，同时非常善于分享。<br />
                    在严格的筛选和培养体系下，每一位领队都能为您带来全方位的讲解和 细致服务。</div>
                <div> 和他们出发，预见更有趣有料的旅行！ </div>
            </div>
        </section>
        <web-footer />
        <back-top />
    </div>
</template>

<script setup>


import { ref, onMounted, computed } from "vue";



import { index_banner, line_items, theme_items, destination_area } from "@/api/travel";




// line_items 简化
let getItem = async (ids, limit = 10) => {
    let res = await line_items({
        ids,
        limit
    });
    return res.data;
};

let getItemArea = async (area, limit = 6) => {
    let res = await line_items({
        area,
        limit
    });
    return res.data;
};
let getItemDes = async (des, limit = 6) => {
    let res = await line_items({
        des,
        limit
    });
    return res.data;
};



// 热销排行榜
let hotSale = ref([]);
let getHotSale = async () => {
    let data = await getItem("7189,7418,7174,7171");
    hotSale.value = data;
};
// 当季精选
let featureList = ref([]);
let getFeatureList = async () => {
    let data = await getItem("7680,7373,7763");
    featureList.value = data;
};
// 周边
let sideLine = ref([]);
let getSide = async () => {
    let data = await getItem("7383,7340,7352,7390");
    sideLine.value = data;
};
// 其他
let rests = ref([]);
let getRests = async () => {
    let data = await getItem("8000,7999,7998,7997");
    rests.value = data;
};





onMounted(async () => {
    await getHotSale();
    await getFeatureList();
    await getSide();
    await getRests();

});

</script>

<style lang="scss" scoped>
@import "../../css/main_periphery_index.css";
</style>
